<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--设置字符编码为utf-8-->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<!--使用IE最新内核,谷歌最新内核-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!--移动端自适应屏幕大小-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效-->
<meta content="telephone=no" name="format-detection">
<!--忽略数字自动识别为电话号码-->
<meta name="renderer" content="webkit">
<!--浏览器内核切换为急速模式-->
<meta name="Robots" content="all">
<!--搜索引擎使用自己设定的描述信息-->
<link rel="stylesheet" type="text/css" href="__HOME_CSS__/all.css">
<link rel="stylesheet" href="__HOME_CSS__/iconfont.css">
<link rel="stylesheet" type="text/css" href="__HOME_CSS__/qb_chat.css">
<link rel="stylesheet" type="text/css" href="__HOME_CSS__/course_detail.css">
<link rel="stylesheet" type="text/css" href="__HOME_CSS__/layer.css">
<style>
body {
	max-width: 640px;
	min-width: 320px;
	margin: 0 auto;
	position: relative;
}
.qb-bar {
	position: absolute;
}
/*新改版本*/
.detail-foot-box {
	width: 100%;
	height: 100%;
	padding: 0;
}
.qb-detail-footer {
	position: absolute;
	width: 100%;
	height: 50px;
	min-height: 50px;
	left: 0px;
	line-height: 50px;
	bottom: 0px;
	overflow: hidden;
	z-index: 10;
}
.detail-foot-box .btn {
	width: 100%;
	height: 100%;
	background-color: #29a7e1;
	color:#fff;
	border:0;
font-size: .25rem;
	text-align: center;
	display: inline-block;
	line-height: inherit;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

.detail-foot-box .btn2 {
	width: 100%;
	height: 100%;
	background-color: #d8332d;
	color:#fff;
	border:0;
font-size: .25rem;
	text-align: center;
	display: inline-block;
	line-height: inherit;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

#qb-course-detail {
	padding-top: 65px;
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.qb-detail-content {
	background: #fff;
	padding: 20px 10px;
	margin-bottom: 20px;
	-webkit-box-shadow: 0 1px 6px #ccc;
	box-shadow: 0 1px 6px #ccc;
	-moz-box-shadow: 0 1px 6px #ccc;
}
.qb-detail-content h1 {
font-size: .3rem;
	text-align: center;
	padding: 0 20px;
}
.qb-detail-boxs {
	border-top: 1px dashed #ddd;
	margin-top: 10px;
	padding: 20px 10px;
	min-height: 2.1rem;
}
.qb-detail-headImg {
	width: 1.5rem;
	height: 1.5rem;
	overflow: hidden;
	border-radius: 50%;
	float: left;
	margin-right: 20px;
	border: 1px solid #bfbfbf;
}
.qb-detail-fonts {
	overflow: hidden;
}
.qb-detail-fonts h3 {
font-size: .28rem;
padding: .1rem 0;
}
.qb-detail-fonts p {
font-size: .25rem;
}
.qb-detail-time img, .qb-detail-hear img {
width: .25rem;
	vertical-align: middle;
}
.qb-detail-time span, .qb-detail-hear span {
	vertical-align: middle;
}
.qb-detail-times {
	padding: 0 20px 20px 10px;
}
.qb-detail-time {
	float: left;
font-size: .25rem;
}
.qb-detail-hear {
	float: right;
font-size: .25rem;
}
#qb-detail-main {
	background-color: #fff;
	padding: 20px 10px 60px 10px;
	-webkit-box-shadow: 0 1px 6px #ccc;
	box-shadow: 0 1px 6px #ccc;
	-moz-box-shadow: 0 1px 6px #ccc;
}
#qb-detail-main p {
font-size: .25rem;
line-height: .45rem;
	letter-spacing: 0.01rem;
}
.qb-title {
	color: #333;
}
.flt-r {
font-size: .25rem;
}
.qb-bar-nav .iconfont {
	color: #29a7e1;
}
#flt-r {
	font-size: 20px;
	top: 5px;
}
.qb-chat-box .qb-chat-message-box {
	padding: 0;
}
.detail-foot-box .qb-buy, .detail-foot-box .qhear {
	position: absolute;
	height: 100%;
	border:0;
	font-size: .25rem;
	text-align: center;
	display: inline-block;
	line-height: inherit;
	margin: 0;
	padding: 0;
}
.detail-foot-box .qb-buy {
	width: 60%;
	color:#fff;
	background-color: #29a7e1;
}
.detail-foot-box .qhear {
	width: 40%;
	background-color:#e0e0e0;
	color: #29a7e1;
	left: 60%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<!--前辈的课程详情-->
<header id="header" class="qb-bar qb-bar-nav qb-header"> 
  <!--<a class="qb-nav-back" href="javascript:history.back()"></a>-->
  <h1 class="qb-title">课程详情</h1>
  <a href="#/" class="flt-r iconfont" id="flt-r"></a> </header>
<footer class="qb-detail-footer">
	<!--<div class="detail-foot-box"> <a class="btn2" href="javascript:doJoin();"> 我要报名 </a> </div>-->
  <div class="detail-foot-box">
   <a class="btn"
    <if condition="$classInfo['status'] eq 3"> href="{:U('Index/listen',array('classid'=>$classInfo['id']))}"
   <else/>heef="#"</if>> 立即听讲 </a> </div>
</footer>

<!--第二种--> 
<!--新改版课程详情-->
<div id="qb-course-detail">
  <div class="qb-detail-content">
    <h1>{$classInfo['title']}</h1>
    <div class="qb-detail-boxs">
      <div class="qb-detail-headImg" style=" background: url(&#39;{$classInfo['headimgurl']}&#39;) center no-repeat;
background-size: cover;"></div>
      <div class="qb-detail-fonts" style="position: relative">
        <h3 style="float: left;">{$classInfo['nickname']}</h3>
        <p style="float:left;text-overflow: ellipsis;overflow: hidden">{$classInfo['description']}</p>
      </div>
    </div>
    <div class="qb-detail-times">
      <div class="qb-detail-time"> <img src="__HOME_IMG__/times.png"> <span>{$classInfo['starttime']}</span> </div>
      <div class="qb-detail-hear"> <img src="__HOME_IMG__/hear.png"> <span>{$classInfo['listennum']}</span> </div>
    </div>
  </div>
  <!--详情-->
  <div id="qb-detail-main">
   {$classInfo['description']}
    </p>
  </div>
</div>
<div class="shadow" style=""></div>
<span class="x-close" style="position: absolute;
top: 31%;
right: 10%;
z-index: 21;
color: white;
font-size: 0.4rem;
font-weight: bold;
display: none;
}" onclick="window.location.reload()">×</span>
<style>
@media screen and (max-width: 320px){
#statement p{
font-size: 12px;
margin: -7px auto;
}
}
@media screen and (max-width: 414px) and (min-width: 321px){
#statement p{
font-size: 12px;
margin: -5px auto;
}
}
@media screen and (min-width: 415px){
#statement p{
font-size: 20px;
}
}
</style>
<div style="
width: 90%;
position: absolute;
top: 5%;
z-index: 22;
background: white;
left: 5%;
border-radius: 10px;
padding: 5px;
height: 90%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
display: none;
" id="statement">
<div style="position: static; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;">
  <div id="trans-tooltip">
    <div id="tip-left-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png);"></div>
    <div id="tip-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png) repeat-x;"></div>
    <div id="tip-right-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png);"></div>
    <div id="tip-right" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png) repeat-y;"></div>
    <div id="tip-right-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png);"></div>
    <div id="tip-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png) repeat-x;"></div>
    <div id="tip-left-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png);"></div>
    <div id="tip-left" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png);"></div>
    <div id="trans-content"></div>
  </div>
  <div id="tip-arrow-bottom" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png);"></div>
  <div id="tip-arrow-top" style="background: url(chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png);"></div>
</div>
</body>
</html>
